<template>
    <div class="resCommon">
        <div class="search">
            <div class="classify">
                <refresh :loading='syncH' v-if="role!=3" title="同步KAFKA" @refresh="syncResource" />
                <!-- <el-button v-if="role!=3" class="addResBtn" type="primary" @click="syncResource" title="同步KAFKA" icon="el-icon-refresh" :loading="syncH"></el-button> -->
            </div>
            <div class="searchBox">
                <el-button v-if="role==1" class="addResBtn" type="primary" @click="addRes">新建资源</el-button>
                <search placeholder="请输入搜索内容" :live-search="true" :search-word.sync="searchName" @search="searchCon"/>
            </div>
        </div>
        <!-- 目录面包屑 -->
        <!-- <el-breadcrumb separator="/" class="breadcrumb-wrap">
            <el-breadcrumb-item></el-breadcrumb-item>
            <el-breadcrumb-item 
                v-for="(item, index) in breadcrumbList"
                :key="item.id"
                @click.native="onClickBread(item, index)"
            >
                <span class="cursor">{{item.name}}</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb> -->
        <div class="breadVisbility"></div>
        <!-- 表格 -->
        <div class="table">
            <el-table v-loading="loading" :data="resourcePublic" stripe style="width: 100%">
                <el-table-column label="主题名">
                    <template slot-scope="scope">
                        <span>{{scope.row.topicName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="partitionNum" label="分区数"></el-table-column>
                <el-table-column prop="replication" label="副本数"></el-table-column>
                <el-table-column v-if="role==1" label="分配的租户">
                    <template slot-scope="scope">
                        <span v-for="(item,index) in scope.row.tenantList" :key='index'> {{item}} </span>
                    </template>
                </el-table-column>
                <el-table-column v-if="role==2" label="分配的用户">
                    <template slot-scope="scope">
                        <span v-for="(item,index) in scope.row.userList" :key='index'> {{item}} </span>
                    </template>
                </el-table-column>
                <el-table-column label="包含权限" width="420">
                    <template slot-scope="scope">
                        <span>{{scope.row.powerList}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" v-if="role!=3">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" @click="editResource(scope.row)">编辑</el-button> -->
                        <el-tooltip content="分配租户" placement="top">
                            <el-button v-if="role==1" type="text" @click="tenantBtn(scope.row)">
                                <i class="el-icon-files icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="分配用户" placement="top">
                            <el-button v-if="role==2" type="text" @click="tenantBtn(scope.row)">
                                <i class="el-icon-files icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button v-if="role==1" type="text" @click="deleteBtn(scope.row)">
                                <i class="el-icon-delete icon-fs"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页(默认 10条/页) -->
        <pagenation :pageInfo='pageinfo'></pagenation>
        <dialogCom :diaData='dialogData'></dialogCom>
    </div>
</template>

<script>
import { mapState } from "vuex";
import DialogCom from '@/components/resource/Resource';
import Pagenation from '@/components/resource/Pagenation'
import resource from '@/mixins/resource'
import Search from '@/components/common/Search'
import { MANAGER_ROLE_CODE, TENANT_ROLE_CODE } from '@/const'
    export default {
        components:{DialogCom, Pagenation, Search},
        mixins:[resource],
        data() {
            return {
                role: '',
                pageinfo: {
                    tenantNum: 0,
                    currentPage: 1
                },
                dialogData:{
                    type: 'KAFKA',
                    label: 'topic',
                    addResourceTab: false,
                    titleTips: '',
                    opeBtn: '',
                    isDisabled: false,
                    operatorTips: '',
                    resOperate: false,
                    editData:{},
                    editYARN:false
                },
                resourcePublic: [],
                path: this.$route.path.toLocaleUpperCase()
            }
        },
        computed: {
            ...mapState(["loginerRole"]),
        },
        mounted(){
            this.breadcrumbList = [
                {
                    name: 'topic',
                    id: '0'
                }
            ];
            if(this.loginerRole == MANAGER_ROLE_CODE){ //管理员
                this.role = '1';
            } else if(this.loginerRole == TENANT_ROLE_CODE) { //租户
                this.role = '2';
            } else {
                this.role = '3';
            }
            // 获取列表
            this.getResourceList();
        },
        methods:{
            addRes(val){
                let resource = this.breadcrumbList;
                let resourceId = resource[resource.length-1].id;
                this.dialogData.titleTips = '新建Kafka资源';
                this.dialogData.addResourceTab = true;
                this.dialogData.isDisabled = false;
                this.dialogData.editData = {};
                this.dialogData.editData.resourceId = resourceId;
                this.dialogData.parentId = resourceId;
                this.dialogData.isPublic = '1';  //1为公共资源
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '~@/styles/resCommon.scss';
    .resCommon .breadcrumb-wrap{
        padding: 20px 0;
        margin: 0;
    }
</style>